<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>superhero</title>
	<link rel="stylesheet" href="css/main.css">
	<link rel="stylesheet" href="css/bootstrap.css">
	<link rel="stylesheet" href="css/public.css">
	<link rel="stylesheet" href="css/bootstrap-theme.css">
	<link rel="stylesheet" href="fa/css/font-awesome.css">
</head>
<body>
	<div class="container">
		<nav>
			<ul class="nav nav-pills nav-justified">
			    <li role="presentation" class="active navlist">
			        <a href="#">首页</a>
			    </li>
			    <li role="presentation" class="navlist">
			        <a href="#">英雄简介</a>
			    </li>
			    <li role="presentation" class="navlist">
			        <a href="#">关于英雄</a>
			    </li>
			    <li role="presentation" class="navlist">
			        <a href="#">关于我们</a>
			    </li>
			    <li role="presentation" class="navlist">
			        <a href="#">联系我们</a>
			    </li>
	    	</ul>
    	</nav>
    	<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
		  <!-- Indicators -->
		    <ol class="carousel-indicators">
			    <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
			    <li data-target="#carousel-example-generic" data-slide-to="1"></li>
			    <li data-target="#carousel-example-generic" data-slide-to="2"></li>
		    </ol>

		  <!-- Wrapper for slides -->
		    <div class="carousel-inner" role="listbox">
			    <div class="item active">
			      <img src="images/superHero2.jpg" alt="...">
			      <div class="carousel-caption">
			      </div>
			    </div>
			    <div class="item">
			      <img src="images/superHero1.jpg" alt="...">
			      <div class="carousel-caption">
			      </div>
			    </div>
			    <div class="item">
			      <img src="images/superHero3.jpg" alt="...">
			      <div class="carousel-caption">
			      </div>
			    </div>
		    </div>

		  <!-- Controls -->
		    <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
		        <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
		    	<span class="sr-only">Previous</span>
		    </a>
		    <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
		    	<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
		    	<span class="sr-only">Next</span>
		    </a>
		</div>
		<div class="main">
			<div class="maininner">
				<div class="backtop">
					<i class="fa fa-arrow-up fa-3x"></i>
				</div>
				<div class="row row1">
  					<div class="col-sm-6 col-md-3">
    					<div class="thumbnail clearfix">
      						<img src="images/雷神.jpg" alt="...">
      						<div class="caption">
        						<h3>雷神</h3>
        						<p>拥有强大神力的雷神托尔（Thor）,被放逐到地球学习如何成为一个真正的英雄。</p>
        						<p><a href="#" class="btn btn-primary" role="button">支持</a> <a href="#" class="btn btn-default" role="button">取消</a></p>
      						</div>
    					</div>
  					</div>
  					<div class="col-sm-6 col-md-3">
    					<div class="thumbnail">
      						<img src="images/绿巨人.jpg" alt="...">
      						<div class="caption">
        						<h3>绿巨人</h3>
        						<p>科学家布鲁斯班纳，每当情绪激动就变身成拥有超能力的绿色巨人。</p>
        						<p><a href="#" class="btn btn-primary" role="button">支持</a> <a href="#" class="btn btn-default" role="button">取消</a></p>
      						</div>
    					</div>
  					</div>
  					<div class="col-sm-6 col-md-3">
    					<div class="thumbnail">
      						<img src="images/黑寡妇.jpg" alt="...">
      						<div class="caption">
        						<h3>黑寡妇</h3>
        						<p>黑寡妇（Black Widow）是漫威漫画公司旗下的超级英雄。</p>
        						<p><a href="#" class="btn btn-primary" role="button">支持</a> <a href="#" class="btn btn-default" role="button">取消</a></p>
      						</div>
    					</div>
  					</div>
  					<div class="col-sm-6 col-md-3">
    					<div class="thumbnail">
      						<img src="images/鹰眼.jpg" alt="...">
      						<div class="caption">
        						<h3>鹰眼</h3>
        						<p>鹰眼，是美国漫威漫画公司旗下的超级英雄，原名克林顿·弗朗西斯·巴顿。</p>
        						<p><a href="#" class="btn btn-primary" role="button">支持</a> <a href="#" class="btn btn-default" role="button">取消</a></p>
      						</div>
    					</div>
  					</div>
				</div>
				<div class="row row2">
  					<div class="col-sm-6 col-md-3">
    					<div class="thumbnail clearfix">
      						<img src="images/金刚狼.jpg" alt="...">
      						<div class="caption">
        						<h3>金刚狼</h3>
        						<p>本名詹姆斯·罗根·豪利特，他拥有长生不老和自我愈合能力，双手可以伸出骨爪。</p>
        						<p><a href="#" class="btn btn-primary" role="button">支持</a> <a href="#" class="btn btn-default" role="button">取消</a></p>
      						</div>
    					</div>
  					</div>
  					<div class="col-sm-6 col-md-3">
    					<div class="thumbnail">
      						<img src="images/蜘蛛侠.jpg" alt="...">
      						<div class="caption">
        						<h3>蜘蛛侠</h3>
        						<p>被蜘蛛咬伤后，具有蜘蛛一般的超能力，从此化身蜘蛛侠守卫纽约。</p>
        						<p><a href="#" class="btn btn-primary" role="button">支持</a> <a href="#" class="btn btn-default" role="button">取消</a></p>
      						</div>
    					</div>
  					</div>
  					<div class="col-sm-6 col-md-3">
    					<div class="thumbnail">
      						<img src="images/蚁人.jpg" alt="...">
      						<div class="caption">
        						<h3>蚁人</h3>
        						<p>蚁人是漫威漫画公司旗下的超级英雄，由编剧斯坦·李和画家杰克·科比合作创造。</p>
        						<p><a href="#" class="btn btn-primary" role="button">支持</a> <a href="#" class="btn btn-default" role="button">取消</a></p>
      						</div>
    					</div>
  					</div>
  					<div class="col-sm-6 col-md-3">
    					<div class="thumbnail">
      						<img src="images/快银.jpg" alt="...">
      						<div class="caption">
        						<h3>快银</h3>
        						<p>本名皮特·马克西莫夫，原作中是万磁王的儿子，绯红女巫的双胞胎弟弟。</p>
        						<p><a href="#" class="btn btn-primary" role="button">支持</a> <a href="#" class="btn btn-default" role="button">取消</a></p>
      						</div>
    					</div>
  					</div>
				</div>
			</div>
			<div class="heroInfo">
				<img src="images/allHeros.jpg" alt="">
				<div class="herosItem">
					<span>雷神</span>
					<span>绿巨人</span>
					<span>黑寡妇</span>
					<span>鹰眼</span>
					<span>金刚狼</span>
					<span>蜘蛛侠</span>
					<span>蚁人</span>
					<span>快银</span>
				</div>
				<figure class="demo demo1">
				    <img src="images/雷神big.jpg">
				    <figcaption>
				        <div>
				      		<h2>雷神</h2>
				      		<p>《雷神》的故事发生在现今的地球以及艾斯卡的奇幻世界。故事的中心人物是拥有强大神力的雷神托尔（Thor），但是他自大鲁莽的行为掀起了一场古老的战争，他也因此被贬入凡间作为惩罚，被迫与人类一同生活。托尔必须学会如何成为一个真正的英雄，才能对抗来自神界的强大黑暗势力。《雷神》一片探讨一个人的传奇冒险，他从一个傲慢自大的神界王位继承人被贬入凡间，他必须成为一名超级英雄才能登上王位。</p>
				    	</div>
				    	<a href="#">View more</a>
				  	</figcaption>     
				</figure>
				<figure class="demo demo2">
				    <img src="images/绿巨人big.jpg">
				    <figcaption>
				        <div>
				      		<h2>绿巨人</h2>
				      		<p>天才核子物理学家罗柏特·布鲁斯·班纳（Robert Bruce Banner）博士在一次意外中为了保护同事而被自己制造出的伽玛炸弹（Gamma Bomb）放射线大量辐射，身体产生异变，后每当他情绪激动心跳加速的时候就会变成名为浩克的绿色怪物。由于变身后往往不受控制、所以为了不伤害自己周围的人、班纳游走于世界各地寻找控制愤怒的方法、即便如此班纳的浩克身份还是时常会造成毁灭性的破坏、因此常成为警方与有关单位追捕的对象。</p>
				    	</div>
				    	<a href="#">View more</a>
				  	</figcaption>     
				</figure>
				<figure class="demo demo3">
				    <img src="images/黑寡妇big.jpg">
				    <figcaption>
				        <div>
				      		<h2>黑寡妇</h2>
				      		<p>黑寡妇（Black Widow）是漫威漫画公司旗下的超级英雄，由编辑斯坦·李、编剧唐·里科（Don Rico），以及漫画家唐·赫克（Don Heck）联合创造。首次登场于《悬疑故事》（Tales of Suspense）第52期（1964年4月），原名为娜塔莉亚·爱丽安诺芙娜·罗曼诺娃（Natalia Alianovna Romanova），也被称为娜塔莎·罗曼诺夫（Natasha Romanoff），1928年出生于前苏联的斯大林格勒，自幼被前苏联特工人员训练成特工，身体经前苏联政府基因改造后大大延缓了其衰老速度，并增强其免疫系统以及抗击打能力，加上本身多年的各种体能及精神上的训练，自身已经犹如致命的毒蜘蛛“黑寡妇”，后背叛前苏联特工组织“红房”（Red Room），加入复仇者联盟，其年龄仅比美国队长小11岁。</p>
				    	</div>
				    	<a href="#">View more</a>
				  	</figcaption>     
				</figure>
				<figure class="demo demo4">
				    <img src="images/鹰眼big.jpg">
				    <figcaption>
				        <div>
				      		<h2>鹰眼</h2>
				      		<p>鹰眼（Hawkeye）是美国漫威漫画公司旗下的超级英雄，原名克林顿·弗朗西斯·巴顿（英语：Clinton Francis Barton），小名克林特（Clint），曾化名为歌利亚（Goliath）与浪人（Ronin），初次登场于《悬疑故事》（Tales of Suspense）第57期（1964年9月），由作家斯坦·李与漫画家唐·海克（Don Heck）共同创作。克林特·巴顿是个在马戏团长大的孤儿，师从剑客（Swordsman）和捷射（Trick Shot），天赋异常，少年时便获得“鹰眼“和“世界最佳狙击手”的称号，因在某次演出时看到钢铁侠救人的一幕后，决心利用自己的能力成为超级英雄，后加入复仇者联盟，成为其中重要的一份子</p>
				    	</div>
				    	<a href="#">View more</a>
				  	</figcaption>     
				</figure>
				<figure class="demo demo5">
				    <img src="images/金刚狼big.jpg">
				    <figcaption>
				        <div>
				      		<h2>金刚狼</h2>
				      		<p>金刚狼（Wolverine）是美国漫威漫画公司旗下超级英雄，首次登场于《不可思议的绿巨人》（The Incredible Hulk）第180期（1974年10月），本名詹姆斯·罗根·豪利特（James "Logan" Howlett），1832年出生于加拿大的阿尔伯塔省，小时候发现自己的亲生父杀死自己的养父后，其超能力就开始显现出来，他拥有长生不老和自我愈合能力，双手还可以伸出骨爪，之后在一场实验中被洗脑、骨骼被注入艾德曼合金，无坚不摧的钢爪取代了之前的骨爪，这使得罗根正式成为金刚狼。</p>
				    	</div>
				    	<a href="#">View more</a>
				  	</figcaption>     
				</figure>
				<figure class="demo demo6">
				    <img src="images/蜘蛛侠big.jpg">
				    <figcaption>
				        <div>
				      		<h2>蜘蛛侠</h2>
				      		<p>蜘蛛侠（Spider-Man）是漫威漫画公司旗下的超级英雄，由编剧斯坦·李和画家史蒂夫·迪特科联合创作，首次登场于1962年8月出版的《惊奇幻想》第15期，因为广受欢迎，几个月后，便开始拥有以自己为主角的单行本漫画。他本名彼得·本杰明·帕克（Peter Benjamin Parker），原是一位普通的高中生，后意外的被一只受过放射性感染的蜘蛛咬伤后，获得了蜘蛛一般的超能力，从此化身蜘蛛侠守卫纽约。</p>
				    	</div>
				    	<a href="#">View more</a>
				  	</figcaption>     
				</figure>
				<figure class="demo demo7">
				    <img src="images/蚁人big.jpeg">
				    <figcaption>
				        <div>
				      		<h2>蚁人</h2>
				      		<p>《蚁人》（Ant-Man）是漫威影业出品的一部科幻动作电影，取材自漫威漫画，作为漫威电影宇宙的第十二部电影、同时也是第二阶段的收官作品面世。由佩顿·里德执导，保罗·路德、迈克尔·道格拉斯、伊万杰琳·莉莉和寇瑞·斯托尔主演。影片讲述了职业骗子斯科特·朗拥有身体变小力量，必须接受自己的英雄身份并帮助他的导师生化学家汉克·皮姆所发明的蚁人战服。在强大的敌人威胁下，皮姆与朗必须精心策划并执行一场惊天骗局来拯救世界的故事</p>
				    	</div>
				    	<a href="#">View more</a>
				  	</figcaption>     
				</figure>
				<figure class="demo demo8">
				    <img src="images/快银big.jpg">
				    <figcaption>
				        <div>
				      		<h2>快银</h2>
				      		<p>快银（Quicksilver）是漫威漫画公司旗下的超级英雄，由编剧斯坦·李和画家杰克·科比联合创造，首次登场于《X战警》#4（1964年3月）。本名皮特·马克西莫夫（Pietro Maximoff），原作中是万磁王的儿子（漫画新剧情：快银并不是万磁王的亲儿子），绯红女巫的双胞胎弟弟（绯红女巫早出生30秒），快银的超能力是自身能以超音速移动，起初、快银和绯红女巫加入了万磁王的变种人兄弟会，后改邪归正，加入复仇者联盟。快银的妻子是异人族的公主水晶（Crystal）。在电影《复仇者联盟2：奥创纪元》中改编为是绯红女巫的双胞胎哥哥（快银早出生12分钟），因与妹妹参与九头蛇的秘密试验并被洛基权杖上的宝石赋予的超能力，后加入复仇者联盟。</p>
				    	</div>
				    	<a href="#">View more</a>
				  	</figcaption>     
				</figure>   
			</div>
		</div>
		<footer>
			<div class="row footerinner">
				<div class="col-md-6">
					<h2>超级英雄网</h2>
					<p>此网站由从小盆友独家赞助，©congxiaoyang.github.io</p>
				</div>
  				<div class="col-md-6">
  					<div class="row">
  						<div class="col-md-4 footerItem">
  							<h4>关于</h4>
  							<a href="#">关于网站</a>
  							<a href="#">关于我们</a>
  							<a href="#">友情链接</a>
  						</div>
  						<div class="col-md-4 footerItem">
  							<h4>联系方式</h4>
  							<a href="#">qq</a>
  							<a href="#">微信</a>
  							<a href="#">微博</a>
  						</div>
  						<div class="col-md-4 footerItem">
  							<h4>赞助商</h4>
  							<a href="#">小帽子</a>
  							<a href="#">大帽子</a>
  						</div>
  					</div>
  				</div>
			</div>
		</footer>
	</div>
	<script type="text/javascript" src="js/jquery-1.11.1.js"></script>
	<script type="text/javascript" src="js/jquery-2.1.1.min.js"></script>
	<script type="text/javascript" src="js/bootstrap.js"></script>
	<script type="text/javascript" src="js/captionHover.dev.js"></script>
	<script type="text/javascript">

		$(".carousel").carousel({
			interval:3500
		})
		var winHeight = $(window).height();
		var bannerHeight = $("#carousel-example-generic").height();
		var navHeight = $("nav").height() + 20;
		var mainInHeight = $(".main .maininner").height() + 40;
		var preHeight = navHeight + bannerHeight + mainInHeight + winHeight;
		$(".heroInfo img").css("height",winHeight);
		$(window.document).scroll(function(){
			var scrolltop = $(window).scrollTop();

			//nav 固定顶部
			if(scrolltop > navHeight){
				// $("nav").addClass("fix");

				if(scrolltop > (bannerHeight + navHeight)){
					$(".heroInfo .herosItem").addClass("show");//左侧英雄快捷栏出现
					$(".backtop").addClass("backtopShow");//回到顶部出现
				}
				else{
					$(".heroInfo .herosItem").removeClass("show");
					$(".backtop").removeClass("backtopShow");
				}
			}else{
				// $("nav").removeClass("fix");
			}
		})
		//回到顶部按钮点击事件（写在外面）
		$(".backtop i").click(function(){
			$("body,html").animate({"scrollTop":0},700)
		})
		//点击左侧英雄快捷栏滚动
		$(".herosItem span").click(function(){
			var spanInd = $(this).index();
			var scrollTop = $(window).scrollTop();
			scrollTop = (spanInd * winHeight) + preHeight;
			$("body,html").animate({"scrollTop":scrollTop},600)

		})

		//回到顶部按钮的小特效
		function flownUp(){
			$(".backtop").addClass("backtopFlownUp");
			$(".backtop").addClass("backtopFlownDown");
		}
		setInterval("flownUp()",1000);
		//英雄图片简介的特效   
		$('.demo1,.demo4').captionHover({
			fx: "chico",
			headColor: "#fff",  //头部的颜色。
			captionColor:"#fff",  //标题的颜色。
			overlay: "#333",    //遮罩层的颜色。
			figWidth:"100%",   //figure元素的宽度。
			figHeight: "100%",  //figure元素的宽度
			bgCaption : 'rgba(0,0,0,0)',   //标题的背景颜色。。
  			iconColor : '#666'     //图标的颜色。。
		});
		$('.demo2,.demo8').captionHover({
			fx: "oscar",
			headColor: "#fff",
			captionColor:"#fff",
			overlay: "#333",
			figWidth:"100%",
			figHeight: "100%",
			bgCaption : 'rgba(0,0,0,0)',
  			iconColor : '#666'
		});
		$('.demo3').captionHover({
			fx: "roxy",
			headColor: "#fff",
			captionColor:"#fff",
			overlay: "#333",
			figWidth:"100%",
			figHeight: "100%",
			bgCaption : 'rgba(0,0,0,0)',
  			iconColor : '#666'
		});
		$('.demo5').captionHover({
			fx: "layla",
			headColor: "#fff",
			captionColor:"#fff",
			overlay: "#000",
			figWidth:"100%",
			figHeight: "100%",
			bgCaption : 'rgba(0,0,0,0)',
  			iconColor : '#888'
		});
		$('.demo6').captionHover({
			fx: "sophie",
			headColor: "#fff",
			captionColor:"#fff",
			overlay: "#000",
			figWidth:"100%",
			figHeight: "100%",
			bgCaption : 'rgba(0,0,0,0)',
  			iconColor : '#888'
		});
		$('.demo7').captionHover({
			fx: "sarah",
			headColor: "#fff",
			captionColor:"#fff",
			overlay: "#000",
			figWidth:"100%",
			figHeight: "100%",
			bgCaption : 'rgba(0,0,0,0)',
  			iconColor : '#888'
		});
	</script>
</body>
</html>